<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=4ed854ffe639aa2341d86b7ea7bbc999&plugin=AMap.StyleObject,AMap.MassMarks"></script>
    <style>
        .marker {
            position: absolute;
            top: -20px;
            right: -118px;
            color: #fff;
            padding: 4px 10px;
            box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
            white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #25A5F7;
            border-radius: 3px;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="container" tabindex="0" style="width: 100%;height: 1000px;"></div>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [121.472644,31.217614],
        zoom: 13
    });
    var markers = [];
    // 创建一个 Icon
    var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(135, 40),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(-9, -3)
    });
    $(function () {
        $.get("/index.php",function (res) {
            for (var i = 0, marker; i < res.length; i++) {
                marker = new AMap.Marker({
                    map: map,
                    position: res[i].lnglat,
                    icon: startIcon,
                    offset: new AMap.Pixel(-13, -30)
                });
                markers.push(marker);
            }
        })
    });
</script>
</body>
</html>